<template>
    <div class="mainCenter">
        <div class="title">图书类型管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item style="width: 150px;">
                        <el-select v-model="value.fid" placeholder="选择楼层">
                            <el-option :value="0" :label="'全部'"/>
                            <el-option v-for="item in typeData.floorList" :label="item.floor" :value="item.fid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="addBookType"><el-icon>
                            <Plus />
                </el-icon>添加类型</el-button>
            </div>
            <el-table style="width: 100%" stripe border :data="typeData.typeList">
                <el-table-column label="类型编号" prop="typeid" />
                <el-table-column prop="type" label="类型" />
                <el-table-column prop="floorList.floor" label="楼层" />
                <el-table-column prop="bookCount" label="相关数量" />
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="danger" plain size="small" @click="deleteType(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10]" :total="pagetions.count"
                style="float: right;margin-top: 20px;" v-model:page-size="pagetions.num" v-model:current-page="pagetions.page"
                @size-change="pagetions.changeLimit" @current-change="pagetions.jumpPage" />

        </div>
        <el-drawer v-model="isChange" :title="'图书操作'" direction="btt" size="200">
            <addType @emit-add="addData"></addType>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { TypeListType } from '@/types/book';
import addType from './addType.vue';
import { reqGetTypeList, reqSearchType, reqDeleteBookType} from '@/api/common';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, reactive, ref, watch } from 'vue';
import { reqGetFloorList } from '@/api/common';
const isChange=ref<boolean>(true)
const typeData=reactive<{typeList:TypeListType[],isSearch:boolean,floorList:any}>({
    typeList:[],
    isSearch:false,
    floorList:[]
})

const value=reactive<{fid:number}>({
    fid:0
})

const addData=(value:any)=>{
    isChange.value=value
    gettypeList()
}

const addBookType=()=>{
    isChange.value=true
}
const pagetions=reactive({
    count:0,
    page:1,
    num:5,
    jumpPage(page:number){
        pagetions.page=page
        typeData.isSearch?searchtypeList():gettypeList()
    },
    changeLimit(num:number){
        pagetions.num=num
        typeData.isSearch?searchtypeList():gettypeList()
    }
})
const gettypeList=async()=>{
    let res=await reqGetTypeList(pagetions.num,pagetions.page)
    typeData.typeList=res.data.data.data
    pagetions.count=res.data.data.count
}

const deleteType=(idx:number,info:TypeListType)=>{
    elementConfirm().then(()=>{
        reqDeleteBookType(info).then(res=>{
            tip(res.data.info,"success")
            gettypeList()
        })
    })
}


const getFloorList=async()=>{
    let res=await reqGetFloorList()
    typeData.floorList=res.data.data
}

const searchtypeList=async()=>{
    let res=await reqSearchType(value.fid,pagetions.num,pagetions.page)
    typeData.typeList=res.data.data.data
    console.log(res.data.data);
    pagetions.count=res.data.data.count
    
}

const search=()=>{
    pagetions.page=1
    typeData.isSearch=true
    console.log(value);
    searchtypeList()

}
onMounted(()=>{
    isChange.value=false
    gettypeList()
    getFloorList()
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -100px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>